<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置 - AI知识管理中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            min-height: 100vh;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .setting-item {
            transition: all 0.3s ease;
        }
        .setting-item:hover {
            background: rgba(59, 130, 246, 0.05);
        }
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 24px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #3b82f6;
        }
        input:checked + .slider:before {
            transform: translateX(24px);
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .gradient-text {
            background: linear-gradient(135deg, #3b82f6, #1e40af);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .version-badge {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 z-50 glass-card">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-3">
                    <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
                        <span class="text-white font-bold text-sm">AI</span>
                    </div>
                    <h1 class="text-xl font-bold text-gray-800">知识管理中心</h1>
                </div>
                <div class="flex space-x-6">
                    <a href="index.html" class="text-gray-600 hover:text-blue-600 transition-colors">仪表板</a>
                    <a href="notes.html" class="text-gray-600 hover:text-blue-600 transition-colors">学习笔记</a>
                    <a href="news.html" class="text-gray-600 hover:text-blue-600 transition-colors">AI资讯</a>
                    <a href="settings.html" class="text-blue-600 font-medium border-b-2 border-blue-600 pb-1">设置</a>
                </div>
            </div>
        </div>
    </nav>

    <div class="pt-16 min-h-screen">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <!-- 页面标题 -->
            <div class="mb-8">
                <h1 class="text-3xl font-bold text-gray-800 mb-2">设置中心</h1>
                <p class="text-gray-600">个性化配置您的AI知识管理体验</p>
            </div>

            <div class="space-y-8">
                <!-- 个人资料设置 -->
                <div class="glass-card rounded-2xl p-6 shadow-lg fade-in">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
                        <svg class="w-6 h-6 mr-3 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        个人资料
                    </h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
                            <input type="text" id="username" value="AI学习者" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
                            <input type="email" id="email" value="learner@example.com" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">学习领域</label>
                            <select id="learning-field" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <option value="ai">人工智能</option>
                                <option value="web">Web开发</option>
                                <option value="mobile">移动开发</option>
                                <option value="data">数据科学</option>
                                <option value="other">其他领域</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">学习经验</label>
                            <select id="experience-level" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <option value="beginner">初学者</option>
                                <option value="intermediate">中级</option>
                                <option value="advanced">高级</option>
                                <option value="expert">专家</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- 主题设置 -->
                <div class="glass-card rounded-2xl p-6 shadow-lg fade-in">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
                        <svg class="w-6 h-6 mr-3 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM7 3H5a2 2 0 00-2 2v12a4 4 0 004 4h2a2 2 0 002-2V5a2 2 0 00-2-2z"></path>
                        </svg>
                        主题与外观
                    </h2>
                    
                    <div class="space-y-4">
                        <div class="setting-item flex items-center justify-between p-4 rounded-lg">
                            <div>
                                <h3 class="font-medium text-gray-800">深色模式</h3>
                                <p class="text-sm text-gray-600">切换到深色主题以减少眼部疲劳</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="dark-mode" onchange="toggleDarkMode()">
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-item flex items-center justify-between p-4 rounded-lg">
                            <div>
                                <h3 class="font-medium text-gray-800">动画效果</h3>
                                <p class="text-sm text-gray-600">启用页面动画和过渡效果</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="animations" checked onchange="toggleAnimations()">
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-item flex items-center justify-between p-4 rounded-lg">
                            <div>
                                <h3 class="font-medium text-gray-800">紧凑布局</h3>
                                <p class="text-sm text-gray-600">使用更紧凑的布局显示更多内容</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="compact-layout" onchange="toggleCompactLayout()">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- 每日提醒设置 -->
                <div class="glass-card rounded-2xl p-6 shadow-lg fade-in">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
                        <svg class="w-6 h-6 mr-3 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        每日提醒
                    </h2>
                    
                    <div class="space-y-4">
                        <div class="setting-item flex items-center justify-between p-4 rounded-lg">
                            <div>
                                <h3 class="font-medium text-gray-800">启用每日提醒</h3>
                                <p class="text-sm text-gray-600">每天定时提醒您查看和完成待办事项</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="daily-reminder" checked onchange="toggleDailyReminder()">
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-item p-4 rounded-lg" id="reminder-time-container">
                            <div class="mb-2">
                                <h3 class="font-medium text-gray-800">提醒时间</h3>
                                <p class="text-sm text-gray-600">设置每日提醒的具体时间</p>
                            </div>
                            <input type="time" id="reminder-time" value="09:00" 
                                   class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                   onchange="updateReminderTime()">
                        </div>
                        
                        <div class="setting-item p-4 rounded-lg">
                            <div class="mb-2">
                                <h3 class="font-medium text-gray-800">每日任务模板</h3>
                                <p class="text-sm text-gray-600">设置每日自动生成的任务</p>
                            </div>
                            <div class="space-y-2">
                                <div class="flex items-center space-x-2">
                                    <input type="checkbox" id="task-template-1" checked class="rounded text-blue-600 focus:ring-blue-500">
                                    <label for="task-template-1">查看最新AI资讯</label>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <input type="checkbox" id="task-template-2" checked class="rounded text-blue-600 focus:ring-blue-500">
                                    <label for="task-template-2">复习昨日学习内容</label>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <input type="checkbox" id="task-template-3" checked class="rounded text-blue-600 focus:ring-blue-500">
                                    <label for="task-template-3">记录今日学习笔记</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- AI资讯推送设置 -->
                <div class="glass-card rounded-2xl p-6 shadow-lg fade-in">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
                        <svg class="w-6 h-6 mr-3 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                        AI资讯推送
                    </h2>
                    
                    <div class="space-y-4">
                        <div class="setting-item flex items-center justify-between p-4 rounded-lg">
                            <div>
                                <h3 class="font-medium text-gray-800">启用资讯推送</h3>
                                <p class="text-sm text-gray-600">定时推送最新的AI资讯到您的设备</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="news-push" checked onchange="toggleNewsPush()">
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-item p-4 rounded-lg" id="news-frequency-container">
                            <div class="mb-2">
                                <h3 class="font-medium text-gray-800">推送频率</h3>
                                <p class="text-sm text-gray-600">设置资讯推送的频率</p>
                            </div>
                            <select id="news-frequency" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                    onchange="updateNewsFrequency()">
                                <option value="daily">每天</option>
                                <option value="twice-daily">每天两次</option>
                                <option value="weekly">每周</option>
                            </select>
                        </div>
                        
                        <div class="setting-item p-4 rounded-lg" id="news-categories-container">
                            <div class="mb-2">
                                <h3 class="font-medium text-gray-800">感兴趣的分类</h3>
                                <p class="text-sm text-gray-600">选择您想要接收的资讯分类</p>
                            </div>
                            <div class="space-y-2">
                                <div class="flex items-center space-x-2">
                                    <input type="checkbox" id="news-category-models" checked class="rounded text-blue-600 focus:ring-blue-500">
                                    <label for="news-category-models">大模型动态</label>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <input type="checkbox" id="news-category-tools" checked class="rounded text-blue-600 focus:ring-blue-500">
                                    <label for="news-category-tools">编程工具</label>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <input type="checkbox" id="news-category-research" checked class="rounded text-blue-600 focus:ring-blue-500">
                                    <label for="news-category-research">研究论文</label>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <input type="checkbox" id="news-category-industry" class="rounded text-blue-600 focus:ring-blue-500">
                                    <label for="news-category-industry">行业动态</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 通知设置 -->
                <div class="glass-card rounded-2xl p-6 shadow-lg fade-in">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
                        <svg class="w-6 h-6 mr-3 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5v-5zM4 19h6v-2H4v2zM4 15h8v-2H4v2zM4 11h10V9H4v2z"></path>
                        </svg>
                        通知设置
                    </h2>
                    
                    <div class="space-y-4">
                        <div class="setting-item flex items-center justify-between p-4 rounded-lg">
                            <div>
                                <h3 class="font-medium text-gray-800">AI资讯推送</h3>
                                <p class="text-sm text-gray-600">接收最新的AI大模型和编程工具资讯</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="news-notifications" checked onchange="toggleNewsNotifications()">
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-item flex items-center justify-between p-4 rounded-lg">
                            <div>
                                <h3 class="font-medium text-gray-800">学习提醒</h3>
                                <p class="text-sm text-gray-600">每日学习目标和进度提醒</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="learning-reminders" checked onchange="toggleLearningReminders()">
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-item flex items-center justify-between p-4 rounded-lg">
                            <div>
                                <h3 class="font-medium text-gray-800">任务截止提醒</h3>
                                <p class="text-sm text-gray-600">待办任务即将到期的提醒通知</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="task-reminders" checked onchange="toggleTaskReminders()">
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-item p-4 rounded-lg">
                            <div class="mb-4">
                                <h3 class="font-medium text-gray-800">推送频率</h3>
                                <p class="text-sm text-gray-600">设置资讯推送的频率</p>
                            </div>
                            <select id="notification-frequency" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <option value="realtime">实时推送</option>
                                <option value="hourly">每小时汇总</option>
                                <option value="daily" selected>每日汇总</option>
                                <option value="weekly">每周汇总</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- AI资讯偏好 -->
                <div class="glass-card rounded-2xl p-6 shadow-lg fade-in">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
                        <svg class="w-6 h-6 mr-3 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9.5a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
                        </svg>
                        AI资讯偏好
                    </h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <h3 class="font-medium text-gray-800 mb-3">关注领域</h3>
                            <div class="space-y-2">
                                <label class="flex items-center">
                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
                                    <span class="ml-2 text-sm text-gray-700">大模型动态</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
                                    <span class="ml-2 text-sm text-gray-700">编程工具</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="ml-2 text-sm text-gray-700">研究论文</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="ml-2 text-sm text-gray-700">行业动态</span>
                                </label>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="font-medium text-gray-800 mb-3">资讯来源</h3>
                            <div class="space-y-2">
                                <label class="flex items-center">
                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
                                    <span class="ml-2 text-sm text-gray-700">OpenAI</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
                                    <span class="ml-2 text-sm text-gray-700">Google</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
                                    <span class="ml-2 text-sm text-gray-700">Anthropic</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="ml-2 text-sm text-gray-700">学术机构</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 数据管理 -->
                <div class="glass-card rounded-2xl p-6 shadow-lg fade-in">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
                        <svg class="w-6 h-6 mr-3 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                        </svg>
                        数据管理
                    </h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div>
                                <h3 class="font-medium text-gray-800 mb-2">导出数据</h3>
                                <p class="text-sm text-gray-600 mb-3">导出您的所有学习笔记和待办事项</p>
                                <button onclick="exportData()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
                                    导出数据
                                </button>
                            </div>
                            
                            <div>
                                <h3 class="font-medium text-gray-800 mb-2">导入数据</h3>
                                <p class="text-sm text-gray-600 mb-3">从其他应用导入学习数据</p>
                                <input type="file" id="import-file" accept=".json" class="hidden" onchange="importData(event)">
                                <button onclick="document.getElementById('import-file').click()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors">
                                    选择文件
                                </button>
                            </div>
                        </div>
                        
                        <div class="space-y-4">
                            <div>
                                <h3 class="font-medium text-gray-800 mb-2">存储使用</h3>
                                <div class="bg-gray-200 rounded-full h-2 mb-2">
                                    <div class="bg-blue-600 h-2 rounded-full" style="width: 35%"></div>
                                </div>
                                <p class="text-sm text-gray-600">已使用 3.5MB / 10MB</p>
                            </div>
                            
                            <div>
                                <h3 class="font-medium text-gray-800 mb-2">清理数据</h3>
                                <p class="text-sm text-gray-600 mb-3">删除过期的学习记录和缓存</p>
                                <button onclick="clearData()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-colors">
                                    清理数据
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 关于信息 -->
                <div class="glass-card rounded-2xl p-6 shadow-lg fade-in">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
                        <svg class="w-6 h-6 mr-3 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        关于应用
                    </h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="flex items-center mb-4">
                                <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mr-4">
                                    <span class="text-white font-bold text-lg">AI</span>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold text-gray-800">AI知识管理中心</h3>
                                    <span class="version-badge">v1.0.0</span>
                                </div>
                            </div>
                            <p class="text-gray-600 mb-4">
                                专为AI时代学习者打造的知识管理工具，集成待办清单、学习笔记和AI资讯推送，助您在快速发展的技术浪潮中保持领先。
                            </p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-gray-800 mb-3">功能特性</h4>
                            <ul class="space-y-2 text-sm text-gray-600">
                                <li class="flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    智能待办清单管理
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    代码高亮学习笔记
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    实时AI资讯推送
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    学习进度可视化
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    数据本地存储
                                </li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="border-t pt-6 mt-6">
                        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
                            <div>
                                <h4 class="font-medium text-gray-800">开发者信息</h4>
                                <p class="text-sm text-gray-600">专为AI学习者打造的智能工具</p>
                            </div>
                            <div class="flex space-x-3">
                                <button onclick="checkUpdate()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
                                    检查更新
                                </button>
                                <button onclick="showHelp()" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition-colors">
                                    帮助文档
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 保存按钮 -->
                <div class="text-center">
                    <button onclick="saveSettings()" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium transition-colors transform hover:scale-105">
                        保存设置
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let settings = JSON.parse(localStorage.getItem('settings')) || {};

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadSettings();
            initializeAnimations();
        });

        // 加载设置
        function loadSettings() {
            // 默认设置
            const defaultSettings = {
                username: 'AI学习者',
                email: 'learner@example.com',
                learningField: 'ai',
                experienceLevel: 'intermediate',
                darkMode: false,
                animations: true,
                compactLayout: false,
                newsNotifications: true,
                learningReminders: true,
                taskReminders: true,
                notificationFrequency: 'daily'
            };

            // 合并用户设置和默认设置
            settings = { ...defaultSettings, ...settings };

            // 应用设置到界面
            document.getElementById('username').value = settings.username;
            document.getElementById('email').value = settings.email;
            document.getElementById('learning-field').value = settings.learningField;
            document.getElementById('experience-level').value = settings.experienceLevel;
            document.getElementById('dark-mode').checked = settings.darkMode;
            document.getElementById('animations').checked = settings.animations;
            document.getElementById('compact-layout').checked = settings.compactLayout;
            document.getElementById('news-notifications').checked = settings.newsNotifications;
            document.getElementById('learning-reminders').checked = settings.learningReminders;
            document.getElementById('task-reminders').checked = settings.taskReminders;
            document.getElementById('notification-frequency').value = settings.notificationFrequency;

            // 应用主题
            if (settings.darkMode) {
                document.body.classList.add('dark');
            }
        }

        // 保存设置
        function saveSettings() {
            // 收集所有设置
            settings = {
                username: document.getElementById('username').value,
                email: document.getElementById('email').value,
                learningField: document.getElementById('learning-field').value,
                experienceLevel: document.getElementById('experience-level').value,
                darkMode: document.getElementById('dark-mode').checked,
                animations: document.getElementById('animations').checked,
                compactLayout: document.getElementById('compact-layout').checked,
                newsNotifications: document.getElementById('news-notifications').checked,
                learningReminders: document.getElementById('learning-reminders').checked,
                taskReminders: document.getElementById('task-reminders').checked,
                notificationFrequency: document.getElementById('notification-frequency').value
            };

            // 保存到本地存储
            localStorage.setItem('settings', JSON.stringify(settings));

            // 显示保存成功提示
            showNotification('设置已保存！');

            // 应用设置更改
            applySettings();
        }

        // 应用设置
        function applySettings() {
            // 应用主题
            if (settings.darkMode) {
                document.body.classList.add('dark');
            } else {
                document.body.classList.remove('dark');
            }

            // 应用动画设置
            if (!settings.animations) {
                document.documentElement.style.setProperty('--animation-duration', '0s');
            } else {
                document.documentElement.style.removeProperty('--animation-duration');
            }
        }

        // 切换深色模式
        function toggleDarkMode() {
            const isDark = document.getElementById('dark-mode').checked;
            if (isDark) {
                document.body.classList.add('dark');
            } else {
                document.body.classList.remove('dark');
            }
        }

        // 切换动画效果
        function toggleAnimations() {
            const hasAnimations = document.getElementById('animations').checked;
            if (!hasAnimations) {
                document.documentElement.style.setProperty('--animation-duration', '0s');
            } else {
                document.documentElement.style.removeProperty('--animation-duration');
            }
        }

        // 切换紧凑布局
        function toggleCompactLayout() {
            const isCompact = document.getElementById('compact-layout').checked;
            if (isCompact) {
                document.body.classList.add('compact');
            } else {
                document.body.classList.remove('compact');
            }
        }

        // 切换资讯通知
        function toggleNewsNotifications() {
            const enabled = document.getElementById('news-notifications').checked;
            if (enabled) {
                // 请求通知权限
                if ('Notification' in window) {
                    Notification.requestPermission();
                }
            }
        }

        // 切换学习提醒
        function toggleLearningReminders() {
            const enabled = document.getElementById('learning-reminders').checked;
            if (enabled) {
                // 设置学习提醒定时器
                setLearningReminders();
            } else {
                // 清除学习提醒定时器
                clearLearningReminders();
            }
        }

        // 切换任务提醒
        function toggleTaskReminders() {
            const enabled = document.getElementById('task-reminders').checked;
            if (enabled) {
                // 设置任务提醒定时器
                setTaskReminders();
            } else {
                // 清除任务提醒定时器
                clearTaskReminders();
            }
        }

        // 导出数据
        function exportData() {
            const data = {
                settings: settings,
                notes: JSON.parse(localStorage.getItem('notes')) || [],
                tasks: JSON.parse(localStorage.getItem('tasks')) || [],
                exportDate: new Date().toISOString()
            };

            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `ai-knowledge-backup-${new Date().toISOString().split('T')[0]}.json`;
            a.click();
            URL.revokeObjectURL(url);

            showNotification('数据导出成功！');
        }

        // 导入数据
        function importData(event) {
            const file = event.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    const data = JSON.parse(e.target.result);
                    
                    // 验证数据格式
                    if (!data.settings && !data.notes && !data.tasks) {
                        throw new Error('无效的数据格式');
                    }

                    // 确认导入
                    if (confirm('导入数据将覆盖现有数据，确定要继续吗？')) {
                        if (data.settings) {
                            localStorage.setItem('settings', JSON.stringify(data.settings));
                        }
                        if (data.notes) {
                            localStorage.setItem('notes', JSON.stringify(data.notes));
                        }
                        if (data.tasks) {
                            localStorage.setItem('tasks', JSON.stringify(data.tasks));
                        }

                        showNotification('数据导入成功！请刷新页面。');
                        
                        // 延迟刷新页面
                        setTimeout(() => {
                            window.location.reload();
                        }, 2000);
                    }
                } catch (error) {
                    showNotification('数据导入失败：' + error.message, 'error');
                }
            };
            reader.readAsText(file);
        }

        // 清理数据
        function clearData() {
            if (confirm('确定要清理所有数据吗？此操作不可恢复。')) {
                // 清理过期数据
                const notes = JSON.parse(localStorage.getItem('notes')) || [];
                const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
                
                // 删除3个月前的笔记
                const threeMonthsAgo = new Date();
                threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
                
                const filteredNotes = notes.filter(note => 
                    new Date(note.updatedAt) > threeMonthsAgo
                );
                
                localStorage.setItem('notes', JSON.stringify(filteredNotes));
                
                showNotification('数据清理完成！');
            }
        }

        // 检查更新
        function checkUpdate() {
            showNotification('正在检查更新...');
            
            // 模拟检查更新
            setTimeout(() => {
                showNotification('您已使用最新版本！');
            }, 2000);
        }

        // 显示帮助
        function showHelp() {
            const helpContent = `
                <div class="space-y-4">
                    <h3 class="text-lg font-bold">使用帮助</h3>
                    <div>
                        <h4 class="font-medium">键盘快捷键</h4>
                        <ul class="text-sm text-gray-600 mt-2 space-y-1">
                            <li>Ctrl/Cmd + Enter：快速添加任务/保存笔记</li>
                            <li>Escape：清除焦点</li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-medium">数据存储</h4>
                        <p class="text-sm text-gray-600 mt-2">所有数据存储在本地浏览器中，确保您的隐私安全。</p>
                    </div>
                    <div>
                        <h4 class="font-medium">技术支持</h4>
                        <p class="text-sm text-gray-600 mt-2">如有问题，请通过应用内反馈功能联系我们。</p>
                    </div>
                </div>
            `;
            
            showModal('帮助文档', helpContent);
        }

        // 设置学习提醒
        function setLearningReminders() {
            if (!settings.learningReminders) return;
            
            // 每日学习提醒（晚上8点）
            const now = new Date();
            const reminderTime = new Date();
            reminderTime.setHours(20, 0, 0, 0);
            
            if (reminderTime <= now) {
                reminderTime.setDate(reminderTime.getDate() + 1);
            }
            
            const timeUntilReminder = reminderTime.getTime() - now.getTime();
            
            setTimeout(() => {
                if (settings.learningReminders) {
                    showNotification('今日学习提醒：记得完成学习目标哦！');
                }
                // 设置下一天的提醒
                setLearningReminders();
            }, timeUntilReminder);
        }

        // 设置任务提醒
        function setTaskReminders() {
            if (!settings.taskReminders) return;
            
            // 每小时检查一次即将到期的任务
            setInterval(() => {
                if (settings.taskReminders) {
                    checkDueTasks();
                }
            }, 3600000); // 1小时
        }

        // 检查即将到期的任务
        function checkDueTasks() {
            const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
            const now = new Date();
            const tomorrow = new Date(now.getTime() + 24 * 60 * 60 * 1000);
            
            const dueTasks = tasks.filter(task => {
                if (task.completed) return false;
                const dueDate = new Date(task.dueDate);
                return dueDate <= tomorrow && dueDate > now;
            });
            
            if (dueTasks.length > 0) {
                showNotification(`您有 ${dueTasks.length} 个任务即将到期！`);
            }
        }

        // 清除学习提醒
        function clearLearningReminders() {
            // 这里可以清除相关的定时器
        }

        // 清除任务提醒
        function clearTaskReminders() {
            // 这里可以清除相关的定时器
        }

        // 显示模态框
        function showModal(title, content) {
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
            modal.innerHTML = `
                <div class="glass-card rounded-2xl max-w-2xl w-full max-h-[80vh] overflow-y-auto">
                    <div class="p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-xl font-bold text-gray-800">${title}</h2>
                            <button onclick="this.closest('.fixed').remove()" class="text-gray-400 hover:text-gray-600">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                        <div class="text-gray-700">${content}</div>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
        }

        // 初始化动画
        function initializeAnimations() {
            // 页面加载动画
            anime({
                targets: '.fade-in',
                translateY: [30, 0],
                opacity: [0, 1],
                duration: 800,
                delay: anime.stagger(100),
                easing: 'easeOutQuad'
            });
        }

        // 显示通知
        function showNotification(message, type = 'success') {
            const notification = document.createElement('div');
            const bgColor = type === 'error' ? 'bg-red-500' : 'bg-green-500';
            notification.className = `fixed top-20 right-4 ${bgColor} text-white px-6 py-3 rounded-lg shadow-lg z-50 transform translate-x-full transition-transform`;
            notification.textContent = message;
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.style.transform = 'translateX(0)';
            }, 100);
            
            setTimeout(() => {
                notification.style.transform = 'translateX(100%)';
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }

        // 自动保存设置
        function autoSaveSettings() {
            const inputs = document.querySelectorAll('input, select, textarea');
            inputs.forEach(input => {
                input.addEventListener('change', function() {
                    setTimeout(() => {
                        saveSettings();
                    }, 1000);
                });
            });
        }

        // 初始化自动保存
        autoSaveSettings();
    </script>
    <script src="api.js"></script>
</body>
</html>